<template>
  <div class="social-media-chart-container">
    <div class="social-media-info" ref="chartContainer">
      <div class="platform-details">
        <div class="platform-title">Review Sources</div>
        <div class="platform-review-count">1,091</div>
        <div class="platform-review-label">Total reviews</div>
      </div>
    </div>
    <div class="chart-container" style="pointer-events: none">
      <PieChart
        :option="optionAnnular1"
        :height="chartHeight"
        :width="chartWidth"
      ></PieChart>
    </div>
  </div>
</template>

<script>
import PieChart from "@components/common/PieChart.vue";
export default {
  props: {
    // switchValue: {
    //   type: Boolean,
    //   required: true,
    // },
  },
  components: {
    PieChart,
  },
  mounted() {
    this.updateChartSize();
    window.addEventListener("resize", this.updateChartSize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.updateChartSize);
  },
  data() {
    return {
      chartWidth: "100%", // 初始宽度
      chartHeight: "1.0417rem", // 保持固定高度或动态计算
      // 其他数据不变
      optionAnnular1: {
        tooltip: {
          trigger: "item",
        },
        legend: [
          {
            orient: "vertical",
            left: "0%",
            top: "45%",
            itemWidth: 16,
            itemHeight: 16,
            itemGap: 8,
            formatter: (name) => {
              const dataItem = this.optionAnnular1.series[0].data.find(
                (item) => item.name === name
              );
              const value = dataItem ? dataItem.value : 0;
              return `${name}  {valueStyle|${value}}`;
            },
            textStyle: {
              color: "#454545",
              fontSize: 12,
              rich: {
                valueStyle: {
                  fontWeight: "bold",
                },
              },
              padding: [0, 0, 0, 4],
            },
            data: [
              {
                name: "Tripadvisor",
                icon: "image://" + require("@/assets/resAndBar/tripadvisor.png"),
                textStyle: { color: "#454545" },
              },
              {
                name: "Google",
                icon: "image://" + require("@/assets/pieIcon/Google3.png"),
                textStyle: { color: "#454545" },
              },
              {
                name: "Others",
                icon: "image://" + require("@/assets/pieIcon/Others.png"),
                textStyle: { color: "#454545" },
              },
            ],
          },
        ],
        series: [
          {
            name: "Access From",
            type: "pie",
            center: ["73%", "50%"],
            radius: ["30%", "90%"],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: "inside",
              formatter: function (params) {
                const percent = params.percent;
                const name = params.name;
                return `{icon_${name}|}\n{percentStyle|${percent}%}`;
              },
              distance: 0,
              padding: [0, 0, 0, 0],
              rich: {
                icon_Tripadvisor: {
                  backgroundColor: {
                    image: require("@/assets/pieIcon/Tripadvisor.png"),
                  },
                  width: 21,
                  height: 16,
                  align: "center",
                },
                icon_Google: {
                  backgroundColor: {
                    image: require("@/assets/pieIcon/Google.png"),
                  },
                  width: 21,
                  height: 16,
                  align: "center",
                },
                icon_Others: {
                  backgroundColor: {
                    image: require("@/assets/pieIcon/Others.png"),
                  },
                  width: 16,
                  height: 16,
                  align: "center",
                },
                percentStyle: {
                  padding: [0, 0],
                  width: 25,
                  height: 25,
                  align: "center",
                  verticalAlign: "middle",
                  fontSize: 10,
                  color: "#fff",
                },
              },
            },
            itemStyle: {
              borderWidth: 2,
              borderColor: "#fff",
            },
            emphasis: {
              scale: false,
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: 350,
                name: "Tripadvisor",
                itemStyle: { color: "#7ACB92" },
              },
              {
                value: 280,
                name: "Google",
                itemStyle: { color: "#FF7043" },
              },
              {
                value: 150,
                name: "Others",
                itemStyle: { color: "#D19E9E" },
              },
            ],
          },
        ],
      },
    };
  },
  mounted() {
    this.checkSwitchStatus();
  },
  methods: {
    updateChartSize() {
      this.$nextTick(() => {
        if (this.$refs.chartContainer) {
          const containerWidth = this.$refs.chartContainer.offsetWidth;
          // 按比例计算高度 (1.0417/4.1667 ≈ 0.25)
          this.chartWidth = `${containerWidth * 0.8}px`; // 80%宽度留边距
          this.chartHeight = `${containerWidth * 0.2}px`; // 保持原比例

          // 同时更新ECharts配置中的center位置
          this.optionAnnular1.series[0].center = ["70%", "50%"];
        }
      });
    },
    checkSwitchStatus() {
      console.log("从 props 获取的开关状态:", this.switchValue);

      if (this.$store && this.$store.state) {
        console.log("从 Vuex 获取的开关状态:", this.$store.state.dashBoard/mediaSwitch);
      } else {
        console.log("Vuex 未正确初始化或无法访问");
      }
    },
    calculateChartSize() {
      if (!this.$refs.chartContainer) return;

      // 获取图表容器的实际可用宽度（已考虑父容器padding）
      const containerWidth = this.$refs.chartContainer.offsetWidth;

      // 直接使用容器宽度（减去必要的边距）
      this.chartWidth = `${containerWidth - 24}px`; // 24px为预留边距

      // 调试输出
      console.log("Calculated chart width:", this.chartWidth);
    },
  },
};
</script>

<style lang="scss" scoped>
.social-media-chart-container {
  position: relative; // 为绝对定位子元素提供参照
  min-height: 200px; // 设置最小高度
  height: 100%; // 保持原有
  width: 100%; // 确保容器有宽度
  display: flex;
  flex-direction: column;
  position: relative;
  background: #fff;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  border-radius: 0.0556rem;
  border: 1px solid #cdcccc;

  .social-media-info {
    width: 1.875rem;
    // height: 1.7708rem;
    margin: 24px 45px 32px 24px;

    .platform-details {
      margin-bottom: 32px;

      .platform-title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 16px;
        color: #454545;
      }

      .platform-review-count {
        font-size: 24px;
        font-weight: 700;
        color: #232323;
        margin-bottom: 3px;
      }

      .platform-review-label {
        font-size: 10px;
        font-weight: 400;
        color: #454545;
      }
    }

    .platform-switch {
      display: flex;
      justify-content: space-between;

      .switch-label {
        font-size: 14px;
        font-weight: 600;
        color: #6a6969;
      }

      .el-switch {
        display: flex;
        align-items: center;
        justify-content: center;
        .el-switch__core {
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }

  .chart-container {
    position: absolute;
    right: 0;
    top: 37px;
    width: 100%; // 占满父容器
    height: 100%;
    padding: 10px; // 留出图例空间

    // 确保canvas填满容器
    ::v-deep .echarts {
      width: 100% !important;
      height: 100% !important;
    }
  }
}
</style>
